<template>
	<view>
		<search></search>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in swiperData" :key="index">
				<navigator  class="swiper-item" :url="`/subPackages/goods_details/goods_details?goods_id=${item.goods_id}`">
					<image :src="item.image_src" ></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="navList">
			<view class="item" v-for="(item,index) in catitemsData" :key="index" @click="goCate(item)">
				<image :src="item.image_src" mode=""></image>
			</view>
		</view>
		<!-- 时尚女装 -->
		<view class="floor">
			<view v-for="(item,index) in floorData" :key="index" class="item">
				<view class="title">
					<image :src="item.floor_title.image_src"></image>
				</view>
				<view class="product_list">
					<view class="left_img_item">
						<navigator class="item_big" :url="item.product_list[0].url">
							<image :src="item.product_list[0].image_src" mode=""></image>
						</navigator>
					</view>
					<view class="right_img_list">
						<navigator class="right_img_item"  v-for="(item2,index2) in item.product_list" :key="index2" v-if="index2 !== 0"  :url="item2.url">
							<image :src="item2.image_src"></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {swiperData,catitemsData,floorData} from '@/API/home_Request.js';
	export default {
		data() {
			return {
				swiperData:[],//轮播图初始值
				catitemsData:[],//导航初始值
				floorData:[]
			};
		},
		onLoad(){
			// 页面加载时执行
			this.getSwiperData();
			this.getCatitemsData();
			this.getfloorData();
		},
		methods:{
			// 请求轮播图
			async getSwiperData(){
				let {data:res} = await swiperData();
				// let res = swiperdata.data
				// console.log(res);
				if(res.meta.msg !== "获取成功") return uni.$showMsg();
				this.swiperData = res.message;
				// console.log(this.swiperData);
			},
			// 请求导航
			async getCatitemsData(){
				let {data:res} = await catitemsData();
				if(res.meta.msg !== "获取成功") return uni.$showMsg();
				this.catitemsData = res.message;
				// console.log(this.catitemsData);
			},
			// 请求楼层
			async getfloorData(){
				let {data:res} = await floorData();
				if(res.meta.msg !== "获取成功") return uni.$showMsg();
				res.message.forEach((floor)=>{
					floor.product_list.forEach(prod=>{
						prod.url = '/subPackages/floor_details/floor_details?' + prod.navigator_url.split('?')[1];
					})
				})
				this.floorData = res.message;
				// console.log(this.floorData);
				
			},
			goCate(item){
				switch(item.name){
					case '分类':
					uni.switchTab({
						url:'/pages/cate/cate'
					});
					break;
					case '母婴品':
					uni.navigateTo({
						url:'/pages/mother_baby_products/mother_baby_products'
					});
					break;
					case '超市购':
					uni.navigateTo({
						url:'/pages/supermarket_shopping/supermarket_shopping'
					});
					break;
					case '秒杀拍':
					uni.navigateTo({
						url:'/pages/second_beat/second_beat'
					});
					break;
				}
			}
		}
	}
</script>

<style lang="scss">
swiper{
	height:350rpx;
	.swiper-item,image{
		width: 100%;
		height: 100%;
	}
}
.navList{
	display: flex;
	justify-content: space-around;
	margin: 40rpx 0;
	.item{
		width: 130rpx;
		height: 140rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}
.floor{
	width: 100%;
	height: 1000rpx;
	.item{
		width: 100%;
		height: 500rpx;
		margin: 20rpx 0;
		.title,.title image{
			width: 100%;
			height: 100rpx;
		}
		.product_list{
			display: flex;
			.left_img_item{
				width: 40%;
				height: 400rpx;
				.item_big,image{
					width: 100%;
					height: 100%;
				}
			}
			.right_img_list{
				display: flex;
				flex-wrap: wrap;
				width: 60%;
				height: 400rpx;
				.right_img_item{
					width: 45%;
					height: 190rpx;
					margin: 5rpx 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>
